import React, { Component } from 'react';
import { withRouter, Link } from 'react-router-dom'
import { Input, Icon, Button } from 'antd';
import $ from 'jquery'

import "../../static/login/login.styl"
import u from '../../common.js'
import $http from '../../common.js'
import { message } from 'antd';

let yzm = ''
export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      account: '',
      password: '',
      yzm: ''
    }
  }
  componentWillMount() {
    this.formVerfi()
    sessionStorage.removeItem('basickeyword')
    sessionStorage.removeItem('basickeysub')
    sessionStorage.removeItem('keyword')
    sessionStorage.removeItem('keysub')
  }

  goRouter(d) {
    this.props.history.push(d)
  }
  //获取表单值
  getVal() {
    this.setState({
      account: $(".user input").val(),
      password: $(".pwd input").val(),
    })
  }
  getVal2() {
    this.setState({
      password: $(".pwd input").val(),
    })
  }
  yzmimg() {
    $('.yzm').attr('src',u.baseUrl+'vrv-monitor-platform-web/captcha.jpg')
  }

  //登录接口
  formVerfi(e) {
    var userVal = $(".user input").val();
    var pwdVal = $(".pwd input").val();
    userVal = $.trim(userVal)
    pwdVal = $.trim(pwdVal);
    yzm = $.trim(yzm)
    if (userVal.length < 1 || pwdVal.length < 1 || yzm == '') {
      $(".errorTips").css({ "opacity": "1" });
      $(".user input").css({ "border-color": "#ea4030" })
      return false
    } else {
      $(".errorTips").css({ "opacity": "0" });
      $(".user input").css({ "border-color": "#1890ff" });
      $http.login({
        account: this.state.account,
        password: this.state.password,
        validateCode: yzm,
        yzm:'yzm'
      }, data => {
        if(data.statusCode !== 200 ){
          message.error( data.message, [1], )
          this.yzmimg()
          return;
        }
        u.userInfo(data => {
          localStorage.setItem('name', data.data.userName)
          localStorage.setItem('userId', data.data.id)
          localStorage.setItem('newGuide',data.data.newGuide)
          this.setState({
            data: data
          })
          this.goRouter('./index')
        });


      });

    }

  }
  render() {
    return (
      <div className="login">
        <div className="left">
          <div className="leftContainer">
            <h2>XZ信息平台</h2>
            <h3>བོད་ལྗོངས་ཀྱི་ཆ་འཕྲིན་སྟེགས་བུ།</h3>
            <Input
              placeholder="用户名"
              className="user"
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              style={{ marginBottom: '5%' }}
              onBlur={() => this.getVal()}
            />
            <Input
              type='password'
              placeholder="密码"
              className="pwd"
              type="password"
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              style={{ marginBottom: '5%' }}
              onBlur={() => this.getVal2()}
            />
            <div className="verfication">
              <Input placeholder="请输入验证码" className='yzminput' onChange={(e) => {
                yzm = $(e.target).val()
              }}
              onKeyDown={(e) => {if(e.keyCode !== 13)return;this.formVerfi()}}
                style={{ width: '56%', marginRight: '3%' }}
              />
              <span onClick={()=>{
                this.yzmimg()
              }}>
                <img  className='yzm' src='http://218.94.137.246:8087/vrv-monitor-platform-web/captcha.jpg' alt="" onClick={()=>{
                  this.yzmimg()
                }} onError={(e)=>{
                  this.yzmimg()
                }}
                />
              </span>

            </div>
            <div className="errorTips">
              请输入验证码
                    </div>
            <Button type="primary"
              style={{ width: "100%", height: "45px" }}
              onClick={() => this.formVerfi()}
            >登录</Button>
          </div>
        </div>
      </div>
    );
  }
}